import React, { Component } from 'react'
import { connect } from 'react-redux'
import { nanoid } from 'nanoid'

import { createAddPerson } from '../../redux/actions/person'
class Person extends Component {

    addPerson = () => {
        const name = this.nameNode.value;
        const age = this.ageNode.value;

        const personObj = { id: nanoid(), name, age }
        this.props.addPerson(personObj)

        console.log(personObj)
    }
    render() {
        return (
            <div>
                <h1>Person 组件 上方组件的求和为:{this.props.count} </h1>
                <input ref={c => this.nameNode = c} type="text" placeholder='输入名字' />
                <input ref={c => this.ageNode = c} type="text" placeholder='输入年龄' />
                <button onClick={this.addPerson}>添加</button>
               
                <ul>
              
                {
                    
                        this.props.persons.map((person) =>{
                            return <li key={person.id}>名字${person.name}:====姓名:${person.age}</li>
                        })
                    
                }
                </ul>

            </div>
        )
    }
}


export default connect(
    // mapStateToProps
    state => ({ persons: state.persons,count:state.count }),
    // mapDispathToProps
    {
        addPerson: createAddPerson
    }

)(Person)